<!--
 * @页面名称:字典管理
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card dictManage">
    <div>
      <el-space>
        <el-button type="primary" :disabled="BtnStatue[0]" @click="add">新增</el-button>
        <el-button :disabled="BtnStatue[1]" @click="edit">编辑</el-button>
        <el-button type="danger" :disabled="BtnStatue[2]" @click="del">删除</el-button>
      </el-space>
      <stable
        style="margin-top: 5px"
        height="300"
        :columns="tableSetting.columns"
        :data="tableSetting.data"
        @rowClick="rowClick"
      ></stable>
    </div>
    <div>
      <el-space style="margin-top: 5px">
        <el-button type="primary" :disabled="BtnStatue2[0]" @click="addDetail">一级新增</el-button>
        <el-button type="primary" :disabled="BtnStatue2[1]" @click="addChildDetail">子级新增</el-button>
        <el-button :disabled="BtnStatue2[2]" @click="editDetail">编辑</el-button>
        <el-button type="danger" :disabled="BtnStatue2[3]" @click="delDetail">删除</el-button>
      </el-space>
      <!-- 副表树结构 -->
      <ztree style="margin-top: 15px" :setting="treeSetting.setting" :nodes="treeSetting.treeData" @onClick="onSelect"> </ztree>
    </div>
    <!-- 主表格弹出框 -->
    <el-dialog v-model="dialogSetting.visible" :title="dialogSetting.title" width="30%" draggable>
      <el-form label-width="90px" :model="formData" :rules="rules" ref="formRef">
        <el-form-item label="字典代号:" prop="Code">
          <el-input v-model="formData.Code"></el-input>
        </el-form-item>
        <el-form-item label="字典名称:" prop="Name">
          <el-input v-model="formData.Name"></el-input>
        </el-form-item>
        <el-form-item label="顺序号:" prop="Order">
          <el-input v-model="formData.Order"></el-input>
        </el-form-item>
        <el-form-item label="字典备注:" prop="Remark">
          <el-input v-model="formData.Remark" :rows="2" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogSetting.visible = false">取消</el-button>
          <el-button type="primary" @click="handle"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 副表格弹出框 -->
    <el-dialog v-model="dialogSetting2.visible" :title="dialogSetting2.title" width="30%" draggable>
      <el-form label-width="90px" :model="formData2" :rules="rules2" ref="formRef2">
        <el-form-item label="字典代号:" prop="Code">
          <el-input v-model="formData2.Code"></el-input>
        </el-form-item>
        <el-form-item label="字典名称:" prop="Name">
          <el-input v-model="formData2.Name"></el-input>
        </el-form-item>
        <el-form-item label="顺序号:" prop="Order">
          <el-input v-model="formData2.Order"></el-input>
        </el-form-item>
        <el-form-item label="字典备注:" prop="Remark">
          <el-input v-model="formData2.Remark" :rows="2" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogSetting.visible = false">取消</el-button>
          <el-button type="primary" @click="handle2"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="dictManage">
import { ref, reactive, onMounted } from "vue";
import Ztree from "@/components/ztree/Ztree.vue";
import type { FormInstance, FormRules } from "element-plus";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();
// 顶部按钮状态
const BtnStatue = ref([false, true, true]);
// 底部按钮状态
const BtnStatue2 = ref([true, true, true, true]);
// 主表格配置
const tableSetting = reactive({
  columns: [
    { field: "DD_Code", title: "字典代号", sortable: true },
    { field: "DD_Name", title: "字典名称", sortable: true },
    { field: "DD_Order", title: "顺序号", sortable: true },
    { field: "DD_Remark", title: "字典备注", sortable: true }
  ],
  data: []
});
// 主表弹出框配置
const dialogSetting = reactive({
  visible: false,
  title: ""
});
// 主表格单击保存对象
const rowClickObj = ref();
// 主表弹出框表单绑定字段
const formData = reactive({
  Code: "",
  Name: "",
  Order: 0,
  Remark: ""
});
//主表弹出框表单规则
const rules = reactive<FormRules>({
  Code: [{ required: true, message: "请填写字典代号!", trigger: "blur" }],
  Name: [{ required: true, message: "请填写字典名称!", trigger: "blur" }]
});
//主表弹出框表单实例
const formRef = ref<FormInstance>();
// 副表树配置
const treeSetting = reactive({
  setting: {
    // ztree配置
    data: {
      simpleData: {
        enable: true,
        idKey: "DDL_ID",
        pIdKey: "DDL_FatherID"
      },
      key: {
        name: "DDL_Name"
      }
    },
    view: {
      showIcon: false
    }
  },
  treeData: [],
  treeNode: {} as any
});
// 副表弹出框配置
const dialogSetting2 = reactive({
  visible: false,
  title: ""
});
// 副表弹出框表单绑定字段
const formData2 = reactive({
  Code: "",
  Name: "",
  Order: 0,
  Remark: ""
});
// 副表弹出框表单规则
const rules2 = reactive<FormRules>({
  Code: [{ required: true, message: "请填写字典代号!", trigger: "blur" }],
  Name: [{ required: true, message: "请填写字典名称!", trigger: "blur" }]
});
// 副表弹出框表单实例
const formRef2 = ref<FormInstance>();
// 获取表格数据
const getTableData = () => {
  proxy.$vueAxios.get("Master_Base_DataDictionary/Get", { order: "DD_Order asc" }).then((res: any) => {
    tableSetting.data = res.List;
  });
};
// 表格单击事件
const rowClick = ({ row }: any) => {
  rowClickObj.value = row;
  BtnStatue.value[1] = false;
  BtnStatue.value[2] = false;
  BtnStatue2.value[0] = false;
  BtnStatue2.value[1] = true;
  BtnStatue2.value[2] = true;
  BtnStatue2.value[3] = true;
  getTreeData();
};
// 主表新增
const add = () => {
  dialogSetting.visible = true;
  dialogSetting.title = "新增";
  formRef.value?.resetFields();
};
// 主表修改
const edit = () => {
  dialogSetting.visible = true;
  dialogSetting.title = "修改";
  formData.Code = rowClickObj.value.DD_Code;
  formData.Name = rowClickObj.value.DD_Name;
  formData.Order = rowClickObj.value.DD_Order;
  formData.Remark = rowClickObj.value.DD_Remark;
};
// 主表删除
const del = () => {
  proxy.$messageBox
    .confirm("确定删除该数据？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      proxy.$vueAxios.post("Master_Base_DataDictionary/Delete", [rowClickObj.value.DD_ID]).then((res: any) => {
        if (res.Mark) {
          proxy.$message.success("删除成功");
          getTableData();
        } else {
          proxy.$message.error("删除失败");
        }
      });
    })
    .catch(err => {
      proxy.$message("取消删除");
    });
};
// 主表弹出框确认事件
const handle = () => {
  formRef.value?.validate(isValid => {
    if (isValid) {
      if (dialogSetting.title === "新增") {
        proxy.$vueAxios
          .post("Master_Base_DataDictionary", {
            dD_ID: proxy.$global.createID(),
            dD_Code: formData.Code,
            dD_Name: formData.Name,
            dD_Order: formData.Order,
            dD_Remark: formData.Remark
          })
          .then((res: any) => {
            getTableData();
            dialogSetting.visible = false;
          });
      } else {
        proxy.$vueAxios
          .put("Master_Base_DataDictionary", {
            dD_ID: rowClickObj.value.DD_ID,
            dD_Code: formData.Code,
            dD_Name: formData.Name,
            dD_Order: formData.Order,
            dD_Remark: formData.Remark
          })
          .then((res: any) => {
            getTableData();
            dialogSetting.visible = false;
          });
      }
    }
  });
};
//获取副表数据
const getTreeData = () => {
  proxy.$vueAxios
    .post("Master_Base_DDL/GetConditional", {
      order: "DDL_Order asc",
      dtoList: [
        {
          fieldName: "DD_ID",
          fieldValue: rowClickObj.value.DD_ID,
          conditionalType: 0
        }
      ]
    })
    .then((res: any) => {
      treeSetting.treeData = res.List;
    });
};
// 副表树节点点击事件
const onSelect = (treeNode: any) => {
  BtnStatue2.value[1] = false;
  BtnStatue2.value[2] = false;
  BtnStatue2.value[3] = false;
  treeSetting.treeNode = treeNode;
};

//副表一级新增按钮
const addDetail = () => {
  dialogSetting2.visible = true;
  dialogSetting2.title = "一级新增";
  formRef2.value?.resetFields();
};
//副表子级新增按钮
const addChildDetail = () => {
  dialogSetting2.visible = true;
  dialogSetting2.title = "子级新增";
  formRef2.value?.resetFields();
};
//副表编辑按钮
const editDetail = () => {
  dialogSetting2.visible = true;
  dialogSetting2.title = "修改";
  formData2.Code = treeSetting.treeNode.DDL_Code;
  formData2.Name = treeSetting.treeNode.DDL_Name;
  formData2.Order = treeSetting.treeNode.DDL_Order;
  formData2.Remark = treeSetting.treeNode.DDL_Remark;
};
//副表删除按钮
const delDetail = () => {
  proxy.$messageBox
    .confirm("确定删除该数据？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      proxy.$vueAxios.post("Master_Base_DDL/Delete", [treeSetting.treeNode.DDL_ID]).then((res: any) => {
        if (res.Mark) {
          proxy.$message.success("删除成功");
          getTreeData();
        } else {
          proxy.$message.error("删除失败");
        }
      });
    })
    .catch(err => {
      proxy.$message("取消删除");
    });
};

// 副表弹出框确认事件
const handle2 = () => {
  formRef2.value?.validate(isValid => {
    if (isValid) {
      if (dialogSetting2.title === "一级新增") {
        proxy.$vueAxios
          .post("Master_Base_DDL", {
            dD_ID: rowClickObj.value.DD_ID,
            ddL_ID: proxy.$global.createID(),
            ddL_FatherID: null,
            ddL_Code: formData2.Code,
            ddL_Name: formData2.Name,
            ddL_Remark: formData2.Remark,
            ddL_Order: formData2.Order
          })
          .then(() => {
            dialogSetting2.visible = false;
            getTreeData();
          });
      } else if (dialogSetting2.title === "子级新增") {
        proxy.$vueAxios
          .post("Master_Base_DDL", {
            dD_ID: rowClickObj.value.DD_ID,
            ddL_ID: proxy.$global.createID(),
            ddL_FatherID: treeSetting.treeNode.DDL_ID,
            ddL_Code: formData2.Code,
            ddL_Name: formData2.Name,
            ddL_Remark: formData2.Remark,
            ddL_Order: formData2.Order
          })
          .then((res: any) => {
            dialogSetting2.visible = false;
            getTreeData();
          });
      } else {
        proxy.$vueAxios
          .put("Master_Base_DDL", {
            dD_ID: rowClickObj.value.DD_ID,
            ddL_ID: treeSetting.treeNode.DDL_ID,
            ddL_FatherID: treeSetting.treeNode.DDL_FatherID || null,
            ddL_Code: formData2.Code,
            ddL_Name: formData2.Name,
            ddL_Remark: formData2.Remark,
            ddL_Order: formData2.Order
          })
          .then(() => {
            dialogSetting2.visible = false;
            getTreeData();
          });
      }
    }
  });
};

onMounted(() => {
  getTableData();
});
</script>
<style lang="scss" scoped>
.dictManage {
  height: 100%;
}
</style>
